import React,{Component} from 'react';
import styles from './index.scss';
import CSSModules from 'react-css-modules';
import {Route,NavLink,Switch} from 'react-router-dom';
import {MyMessage,MyCollection,MyJoin} from "../../components";//30
import { connect} from 'react-redux';
import axios from 'axios';
const mapStateToProps = state => {
    return {
      userpic: state.headpic.userpic,
    };
};
class MyUser extends Component {
    componentWillMount(){
        axios({
            url   : 'http://47.92.98.104:8080/zhuiying/getUser?Uid=1',
            method: 'get'
        }).then(res=>{
            if(res.data.Image){
                this.refs.smimg.src  = res.data.Image;
                this.refs.bigimg.src = res.data.Image;
            }
            if(res.data.Info){
                document.getElementById('usersign').innerHTML = res.data.Info;
            }
            this.refs.username.innerHTML = res.data.UserName;
        })
    }
    render(){
        return (
        <div styleName="user_background">
            <div styleName="user_container" >
                <div styleName="userhead">
                    <ul styleName="clearfix header_r_u">
                        <li styleName="smallpic"><img src={this.props.userpic} ref="smimg"/></li>
                        <li><NavLink to='/user' activeStyle={{color:'#00a0d8'}} exact>基本信息</NavLink></li>
                        <li><NavLink to='/user/MyCollection' activeStyle={{color:'#00a0d8'}}>我的收藏</NavLink></li>
                        <li><NavLink to="/user/MyJoin" activeStyle={{color:'#00a0d8'}}>我的参与</NavLink></li>
                    </ul>
                </div>
                <div styleName="userbg">
                    <ul styleName="midpic">
                        <li styleName="midpic2">
                        <img src={this.props.userpic} ref="bigimg"/>
                        </li>
                        <li styleName="usermassage">
                            <h3 ref="username">追影小粉~</h3>
                            <p id="usersign">还木有个性签名</p>
                        </li>
                    </ul>
                </div>
                <div styleName="details">
                    <div styleName="details_head clearfix">
                        <div styleName="details_head_l">
                            <p>个人中心</p>
                        </div>
                        <div styleName="details_head_r">
                            <p>我的信息</p>
                        </div>
                    </div>
                    <div styleName="details_body clearfix">
                        <ul styleName="details_body_l">
                            <li><NavLink to='/user' styleName="base_message" ><em></em><span>基本信息</span></NavLink></li>
                            <li><NavLink to='/user/MyCollection' styleName="collection" activeStyle={{ color     : "#fff",
                            background: "#fc624d"}}><em></em><span>我的收藏</span></NavLink></li>
                            <li><NavLink to="/user/MyJoin" styleName="my_join" activeStyle={{ color     : "#fff",
                            background: "#fc624d"}}><em></em><span>我的参与</span></NavLink></li>
                        </ul>
                        <div styleName="details_body_r">
                            <Switch>
                                <Route path='/user' component={MyMessage} exact></Route>
                                <Route path='/user/MyCollection' component={MyCollection}></Route>
                                <Route path='/user/MyJoin' component={MyJoin}></Route>
                            </Switch>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        )
    }
}
const User = CSSModules(MyUser, styles,{allowMultiple:true});
export default connect(mapStateToProps)(User);